<template>
    <view class="pub_page pub_page_bg pub_redPacket_release pub_header_padding">
        <pub-head headerName="redPacket_release" :headerConfig="headerConfig"></pub-head>
        <pub-dialog v-show="dialogShow" dialogName="redPacket_release" :dialogConfig="dialogConfig"
            @dialogBack="dialogBack"></pub-dialog>
        <div class="pub_page_scroll page_box">
            <div class="input_div">
                <div class="li">
                    <div class="title">1万金币价</div>
                    <div class="input">
                        <input type="text" placeholder="$0.00" v-model="money" maxlength="6">
                    </div>
                </div>
                <div class="li_msg">单价是指10000金币单价，区间价格：{{ minPrice }}-{{ maxPrice }}U</div>
                <div class="li">
                    <div class="title">输入数量</div>
                    <div class="input">
                        <input type="text" placeholder="数量" v-model="num" maxlength="6">
                    </div>
                    <div class="txt">万金币</div>
                </div>
                <div class="li">
                    <div class="title">输入密码</div>
                    <div class="input">
                        <input type="password" placeholder="交易密码" v-model="password" maxlength="6">
                    </div>
                </div>
            </div>
            <div class="text_div">
                <div class="p_1">$ <span class="num">{{ totalPrice }}</span></div>
                <div class="btn" @click="toDeal('to_submit')">塞进红包</div>
                <div class="p_2">当前USDT：{{ userInfo.usd || 0 }}</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '发红包',//标题栏内容
                left_type: 3,
            },

            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },

            minPrice: 0,
            maxPrice: 0,
            userInfo: '',

            num: '',
            money: '',
            password: '',
        };
    },
    watch: {
        'num': {
            handler() {
                this.num = this.num.replace(/^(0+)|[^\d]+/g, '');
            },
            immediate: true,
            deep: true
        },
        'money': {
            handler() {
                let value = this.money;
                value = value.replace(/[^\d.]/g, "");//清除"数字"和"."以外的字符    
                value = value.replace(/^\./g, "");//验证第一个字符是数字而不是字符    
                value = value.replace(/\.{2,}/g, ".");//只保留第一个.清除多余的    
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数  
                setTimeout(() => {
                    this.money = value;
                    this.$forceUpdate();
                }, 10);
            },
            immediate: true,
            deep: true
        },
    },
    computed: {
        totalPrice() {
            return Math.round(this.num * this.money * 100) / 100;
        }
    },
    onLoad(option) {
        this.priceTxt = `${option.minPrice}-${option.maxPrice}U`;
        this.minPrice = option.minPrice || 0
        this.maxPrice = option.maxPrice || 0
        this.getUserInfo();
    },
    methods: {
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.name == 'redPacket_release' && data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        async getUserInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async toDeal(type) {
            switch (type) {
                case 'to_submit':
                    if (this.money == '' || this.money < this.minPrice || this.money > this.maxPrice) {
                        this.$comFun.toast('请输入正确的价格');
                        return;
                    }
                    if (this.num == '' || !this.$comFun.ValidateNum(this.num)) {
                        this.$comFun.toast('请输入正确的数量');
                        return;
                    }
                    if (this.userInfo.usd < this.totalPrice) {
                        this.$comFun.toast('您的USDT不足');
                        return;
                    }
                    if (this.password == '') {
                        this.$comFun.toast('请输入支付密码');
                        return;
                    }
                    this.dialogType = 'sure_submit';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定发红包？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_submit':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('wall/sendRedPacket', {
                        money: this.money,
                        num: this.num,
                        password: this.password,
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.$comFun.toast('发布成功');
                        uni.$emit("redPacketReload")
                        setTimeout(() => {
                            this.$comFun.closeWin()
                        }, 1000)
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/redPacket.scss";
</style>
